<template>
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="faceId" label="编号">
            </el-table-column>
            <el-table-column prop="adminId" label="管理员编号">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="{row}">
                    <el-button type="warning" @click="update(row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="修改人脸" :visible.sync="dialogVisible" width="30%">
            <el-form ref="form" :model="form">
                <el-form-item label="人脸编号">
                    <el-input v-model="form.faceId" readonly></el-input>
                </el-form-item>
                <el-form-item label="管理员编号">
                    <el-input v-model="form.adminId" readonly></el-input>
                </el-form-item>
                <el-form-item label="人脸图片">
                    <el-upload class="avatar-uploader" action="http://localhost:9202/api/upload" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="form.faceImg" :src="form.faceImg" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            dialogVisible: false,
            form: {}
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        getList() {
            this.$axios({
                url: '/api/face',
                method: 'get',
            }).then(res => {
                this.tableData = res.data.data
            })
        },
        update(row) {
            this.dialogVisible = true
            console.log(row);
            this.form = { ...row }
        },
        handleAvatarSuccess(res, file) {
            this.form.faceImg = file.response.data
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        submit() {
            this.$axios({
                url: '/api/face',
                method: 'put',
                data: this.form
            }).then(res => {
                this.$message.success(res.data.data)
                this.getList()
                this.dialogVisible = false

            })
        }
    }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>